<template>
	<view class="my">
		<template v-if="loginOrNot">
			<template v-if="JSON.stringify(yrPageConfig) != '{}' && userInfo">
				<view
					class="background-image"
					:style="'width: 100%;background: #EBEEF5 url('+(userInfo.banner?userInfo.banner:yrPageConfig.backgroundImage)+');background-size: 100%;background-repeat: no-repeat;background-position: center;padding-bottom: 50rpx;'">
					<view style="width: 100%;height: 120rpx;"></view>
					<view class="user-info">
						<view class="avatar" @click="$_To('user/user?uid='+userInfo.uid)">
							<image :src="userInfo?userInfo.avatar:''" mode="widthFix"></image>
						</view>
						<view class="right">
							<view class="right-top">
								<template v-if="loginOrNot">
									<text class="nickname">
										{{userInfo?userInfo.nickname:''}}
									</text>
									<text class="roleName">
										{{userInfo?userInfo.roleName:''}}
									</text>
								</template>
								<template v-else>
									<text class="nickname">未登录</text>
								</template>
							</view>
							<view class="right-bottom" v-if="loginOrNot">
								<view>
									<text>{{userInfo?userInfo.stats.postPublishCount:''}}</text>
									<text>帖</text>
								</view>
								<view>
									<text>{{userInfo?userInfo.stats.commentPublishCount:''}}</text>
									<text>评</text>
								</view>
								<view>
									<text>{{userInfo?userInfo.stats.followMeCount:'0'}}</text>
									<text>粉</text>
								</view>
								<view>
									<text>{{userInfo?userInfo.stats.likeMeCount:'0'}}</text>
									<text>赞</text>
								</view>
							</view>
						</view>
					</view>
					<view
						@click="$_To('my/userEditing')"
						class="a-row"
						v-if="loginOrNot">
						{{userInfo?userInfo.bio:'填写简介更容易获得大家的关注，点击添加 >'}}
					</view>
				</view>
				<view v-if="yrPageConfig.hook[0].html">
					<mp-html :content="yrPageConfig.hook[0].html" :selectable="true"/>
				</view>
				<view class="draft-and-release">
					<view class="draft" @click="$_To('editor/draft','Token')">
						<text class="iconfont icon-yingpingmoban"></text>
						<text style="padding-right: 5rpx;">草稿</text>
						<text>{{numberOfDrafts}}</text>
					</view>
					<view @click="$_To('editor/editor?type=new')">
						<text class="iconfont icon-bianji"></text>
						<text>发布</text>
					</view>
				</view>
				<view v-if="yrPageConfig.hook[1].html">
					<mp-html :content="yrPageConfig.hook[1].html" :selectable="true"/>
				</view>
				<view class="noe-menu">
					<view class="for" @click="$_To('my/account')">
						<view class="left" style="background: #00c5c7;"><text class="iconfont icon-jiju"></text></view>
						<view class="center">账号设置</view>
						<view class="right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="for" @click="$_To('my/userEditing')">
						<view class="left" style="background: #53bcf5;"><text class="iconfont icon-wodeguanzhu"></text></view>
						<view class="center">资料编辑</view>
						<view class="right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="for" @click="$_To('my/preset')">
						<view class="left" style="background: #ff705e;"><text class="iconfont icon-chuangzuo"></text></view>
						<view class="center">预置语设置</view>
						<view class="right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="for" @click="$_To('my/post','Token')">
						<view class="left" style="background: #a8c500;"><text class="iconfont icon-bianji"></text></view>
						<view class="center">我的发帖</view>
						<view class="right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="for" @click="$_To('my/comment','Token')">
						<view class="left" style="background: #ff705e;"><text class="iconfont icon-wode"></text></view>
						<view class="center">我的回帖</view>
						<view class="right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<!-- <view class="for" @click="$_To('my/cacheConfigUration')">
						<view class="left" style="background: #a09989;"><text class="iconfont icon-adjust"></text></view>
						<view class="center">缓存设置</view>
						<view class="right">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view> -->
					<!-- #ifdef APP-PLUS -->
					<view class="for" @click="$_To('my/appVersion')">
						<view class="left" style="background: #00c5c7;"><text class="iconfont icon-fuzhi"></text></view>
						<view class="center">APP更新</view>
						<view class="right">
							<text class="text" v-if="versionDetection">有更新</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<!-- #endif -->
				</view>
				<view v-if="yrPageConfig.hook[2].html">
					<mp-html :content="yrPageConfig.hook[2].html" :selectable="true"/>
				</view>
				<view class="exit-button" @click="clickExit">退出</view>
				<view v-if="yrPageConfig.hook[3].html">
					<mp-html :content="yrPageConfig.hook[3].html" :selectable="true"/>
				</view>
				<view class="copyright">
					<view class="for" v-if="account">
						<view
							v-if="account.account_terms_status"
							@click="$_To('my/accountTerms')">服务条款</view>
						<view
							v-if="account.account_privacy_status"
							@click="$_To('my/accountPrivacy')">隐私政策</view>
						<view
							v-if="account.account_cookies_status"
							@click="$_To('my/accountCookies')">Cookies 使用条款</view>
						<view
							v-if="account.delete_account_type != 1"
							@click="$_To('my/applyDelete')">注销账号</view>
					</view>
					<view class="for">
						<view @click="$_To('my/poweredBy')">Powered by YouRanSNS for Fresns</view>
						<view @click="clickClearCache">清空缓存</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view style="width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;">
					<public-loading></public-loading>
				</view>
				
			</template>
		</template>
		<template v-else>
			<template v-if="JSON.stringify(yrPageConfig) != '{}'">
				<view class="not-logged-in" :style="'background: #000000 url('+yrPageConfig.notLoggedInBackgroundImage+') no-repeat;background-size: 100% 100%;background-position: center;'">
					<view class="center-box">
						<view class="web-name">{{webName}}</view>
						<!-- #ifdef MP-WEIXIN -->
						<view
							@click="$_To('login/weChatLogin')"
							class="operating-button"
							style="background: #67C23A;">
							<text class="iconfont icon-weixin"></text>
							<text> 微信登录</text>
						</view>
						<!-- #endif -->
						<view
							@click="$_To('login/login')"
							class="operating-button"
							style="background: #F56C6C;">
							<text>账号或验证码登录</text>
						</view>
						<view
							@click="$_To('login/login?type=machineCode')"
							class="operating-button"
							style="background: #409EFF;">
							<text>没有账号？请注册</text>
						</view>
					</view>
				</view>
			</template>
		</template>
		<!-- 微信隐私弹窗 -->
		<!-- #ifdef MP-WEIXIN -->
		<public-privacy-popup></public-privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yrPageConfig:{},
				userInfo:null,
				numberOfDrafts:"",
				versionDetection:false,
				loginOrNot:false,
				webName:"",
				account:null
			}
		},
		onShow() {
			this.loginOrNot = this.$_loginOrNot();
			// 是否有通知
			this.$_isThereAnotification();
			this.getConfig();
		},
		onLoad() {
			this.$_Request(
				"GET", "/api/v2/global/configs",
				{
					"keys":"site_name,account_terms_status,account_privacy_status,account_cookies_status,delete_account_type"
				},
				(res) => {
					this.webName = res.data.data.site_name;
					this.account = res.data.data;
				}
			)
		},
		methods: {
			getConfig(){
				uni.request({
					url:this.$_Config() + "my.json",
					method:"GET",
					success: (res) => {
						this.yrPageConfig = res.data;
						if(uni.getStorageSync('user')){
							// 获取用户信息
							this.getUserInformation();
						}
					}
				})
			},
			// 获取用户信息
			getUserInformation(){
				let uid = uni.getStorageSync('user').data.detail.uid;
				this.$_Request(
					"GET","/api/v2/user/"+uid+"/detail",{},
					(res) => {
						this.userInfo = res.data.data.detail;
						// 获取草稿数量
						this.getNumberOfDrafts();
					}
				)
			},
			// 获取草稿数量
			getNumberOfDrafts(){
				this.$_Request(
					"GET","/api/v2/editor/post/drafts", {},
					(res) => {
						if(res.data.code == 0){
							this.numberOfDrafts = res.data.data.pagination.total;
						}
						// #ifdef APP-PLUS
						// APP 版本检测
						this.getVersionDetection();
						// #endif
					}
				)
			},
			// APP 版本检测
			getVersionDetection(){
				uni.request({
					url:this.$_Config() + "appVersion.json",
					method:'GET',
					success: (res) => {
						let current = plus.runtime.version,
							latestVersion = res.data.latestVersion;
						if(current != latestVersion){
							this.versionDetection = true;
						}
					}
				})
			},
			// 清空全部缓存
			clickClearCache(){
				uni.showModal({
					title: "注意",
					content: "本地缓存数据将全部清空，非必要情况，请不要清空。",
					success: (res) => {
						if(res.confirm) {
							uni.request({
								url:this.$_Url() + "/api/v2/account/logout",
								method:'DELETE',
								header:this.$_FresnsHeader()
							})
							uni.clearStorage();
							uni.clearStorageSync();
							this.userInfo = null;
							this.loginOrNot = false;
							// #ifdef APP-PLUS
							plus.runtime.restart();
							// #endif
						}
					}
				});
			},
			clickExit(){
				uni.showModal({
					title: "提示",
					content: "是否要退出？",
					success: (res) => {
						if(res.confirm) {
							uni.request({
								url:this.$_Url() + "/api/v2/account/logout",
								method:'DELETE',
								header:this.$_FresnsHeader()
							})
							uni.clearStorage();
							uni.clearStorageSync();
							this.userInfo = null;
							this.loginOrNot = false;
							// #ifdef APP-PLUS
							plus.runtime.restart();
							// #endif
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.my{
	.not-logged-in{
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.center-box{
			width: 600rpx;
			height: 600rpx;
			background-color:rgba(0,0,0,0.3);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			.web-name{
				font-size: 50rpx;
				line-height: 50rpx;
				color: #FFF;
				text-shadow: 0 0 5rpx #000;
				font-weight: bold;
				padding-bottom: 25rpx;
			}
			.operating-button{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 400rpx;
				height: 80rpx;
				background: #ccc;
				margin-top: 25rpx;
				border-radius: 10rpx;
				text{
					font-size: 28rpx;
					line-height: 28rpx;
					color: #FFF;
				}
				.iconfont{
					font-size: 50rpx;
					line-height: 50rpx;
				}
			}
		}
	}
	.background-image{
		.user-info{
			display: flex;
			align-items: center;
			padding: 0 25rpx 25rpx 25rpx;
			.avatar{
				flex-shrink: 0;
				width: 180rpx;
				height: 180rpx;
				overflow: hidden;
				border-radius: 100%;
				border: 5rpx solid #FFF;
			}
			.right{
				padding-left: 25rpx;
				flex: 1;
				.right-top{
					text{
						color: #FFF;
						text-shadow: 0 0 1px #000;
					}
					.nickname{
						font-size: 45rpx;
					}
					.roleName{
						padding-left: 15rpx;
						font-size: 28rpx;
					}
				}
				.right-bottom{
					display: flex;
					align-items: center;
					margin-top: 15rpx;
					view{
						padding-right: 25rpx;
						margin-right: 25rpx;
						border-right: 1rpx solid #FFF;
						line-height: 28rpx;
						text{
							color: #FFF;
							font-size: 28rpx;
							text-shadow: 0 0 1px #000;
						}
					}
					view:last-child{
						border-right: 0;
					}
				}
			}
		}
		.a-row{
			color: #FFF;
			font-size: 28rpx;
			line-height: 28rpx;
			margin: 25rpx 0 0 25rpx;
			text-shadow: 0 0 1px #000;
			display: -webkit-box;
			/*!autoprefixer:off*/
			-webkit-box-orient: vertical;
			/*autoprefixer:on*/
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}
	.draft-and-release{
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid $BeiJingSe;
		padding-bottom: 25rpx;
		view{
			width: 250rpx;
			height: 80rpx;
			background: $LanSe;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 25rpx 12.5rpx 0 12.5rpx;
			border-radius: 100rpx;
			text{
				font-size: 32rpx;
				line-height: 32rpx;
				color: #FFF;
				text-shadow: 0 0 1rpx #000;
			}
			.iconfont{
				font-size: 35rpx;
				line-height: 35rpx;
				padding-right: 10rpx;
			}
		}
		.draft{
			background: $HongSe;
		}
	}
	.noe-menu{
		.for{
			display: flex;
			align-items: center;
			padding: 25rpx;
			border-bottom: 1rpx solid $BeiJingSe;
			.left{
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100%;
				text{
					color: #FFF;
				}
			}
			.center{
				flex: 1;
				margin: 0 15rpx;
			}
			.right{
				display: flex;
				align-items: center;
				.text{
					font-size: 22rpx;
					line-height: 22rpx;
					padding-right: 10rpx;
					color: $HongSe;
				}
				.iconfont{
					color: $ZhanWeiSe;
				}
			}
		}
	}
	.exit-button{
		background: $HongSe;
		color: #FFF;
		width: 200rpx;
		height: 80rpx;
		margin: 25rpx auto auto auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}
	.login-button{
		background: $LanSe;
		color: #FFF;
		width: 200rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		margin-right: 25rpx;
	}
	.register-button{
		background: $HongSe;
		color: #FFF;
		width: 200rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}
	.copyright{
		padding: 25rpx 0;
		.for{
			display: flex;
			align-items: center;
			justify-content: center;
			view{
				font-size: 22rpx;
				line-height: 22rpx;
				color: $ZhanWeiSe;
				padding: 0 10rpx;
			}
		}
		.for:nth-child(1){
			padding-bottom: 20rpx;
		}
	}
	.no-login{
		padding-top: 300rpx;
	}
}
</style>
